<template>
    <div class="Profile">
        <div class="profile_info">
            <div class="Profile_img">
                <img :src="user.profile.avatarUrl" alt="">
            </div>
            <div class="right">
                <div>
                    <span class="nickname">{{user.profile.nickname}}</span>
                    <span class="gen iconfont " :class="user.gender == 0 ? 'iconnvxing' : 'iconnanxing'"></span>
                    <span class="level">Lv.{{user.level}}</span>
                </div>
                <div class="stateCount">
                    <div>
                        <div class="count">{{user.profile.eventCount}}</div>
                        动态
                    </div>
                    <div>
                        <div class="count">{{user.profile.follows}}</div>
                        关注
                    </div>
                    <div>
                        <div class="count">{{user.profile.followeds}}</div>
                        粉丝
                    </div>
                </div>
                <div class="area">所在地区：江西省 南昌市</div>
                <div class="intr">个人介绍：暂无介绍</div>
                <div><el-button type="" size="mini">编辑个人信息</el-button></div>
            </div>
        </div>
        <!--创建的歌单-->
        <playlist  v-if="createPlaylist.length != 0" :createPlaylist = "createPlaylist" :title="type1" />
        <!--创建的歌单-->
        <playlist  v-if="subPlaylist.length != 0" :createPlaylist = "subPlaylist" :title="type2" />
    </div>
</template>

<script>
import {_getUseDetail} from '../../network/user'
import playlist from '../../components/content/user/playlist'
export default {
    name: 'Profile',
    props: [

    ],
    data() {
        return {
            user:null,
            createPlaylist:[],
            subPlaylist:[],
            type1:"我创建的歌单",
            type2:"我收藏的歌单"
        };
    },
    computed: {

    },
    created() {
        this.addPlaylist()
        _getUseDetail(JSON.parse(sessionStorage.getItem('cloudUser')).userId)
        .then(res => {
            this.user = res.data
        })
        
    },
    mounted() {

    },
    watch: {

    },
    methods: {
        addPlaylist(){
          // 创建的歌单
          let uid = JSON.parse(sessionStorage.getItem('cloudUser')).userId
          let createPlaylist = JSON.parse(sessionStorage.getItem('myPlaylist'))
          createPlaylist.forEach(val => {
              if(uid == val.userId){ 
                this.createPlaylist.push(val)
              }else{
                this.subPlaylist.push(val)
              }
          })
        }
    },
    components: {
        playlist,
    },
};
</script>

<style scoped lang="less">
@mainColor:#2f3640;
@itemecolor:#E03F40;
@navLightColor:#273c75;
@textColor:#fff;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.Profile{
    width: 100%;
    height: calc(100vh - 49px * 2);
    background-color: @mainColor;
    overflow: auto;
    color: @textColor;
    .profile_info{
        .position_flex(flex-start,top);
        font-size: 16px;
        margin-top: 30px;
        &>div{
            margin-left: 25px;
        }
        .Profile_img{
            width: 200px;
            height: 200px;
            img{
                width: 100%;
            };
        }
        .right{
            &>div{
                margin-bottom: 20px;
            }
            span{
                margin-right: 15px;
            }
            .nickname{
                font-size: 25px;
            }
            .level{
                border-radius: 5px;
                padding: 2px 5px;
                font-weight: bold;
                color: @itemecolor;
                border: 1px solid @itemecolor;
            }
            .stateCount{
                font-size: 18px;
                .position_flex(flex-start,top);
                &>div{
                    border-right: 1px solid;
                    font-weight: bold;
                    padding:0 10px;
                }
            }
            .area,.intr{
                font-size: 14px;
            }
        }
    }
}
</style>
